<template>
    <a-popup ref="popup" popPlacement="right-start" :popModifiers="popModifiers" :popShown="popShown" :escToClose="false">
        <slot></slot>
        <template v-slot:pop>
            <slot name="pop">
                <div class="c-f-h c-f-center-center pop" :class="[props.dotOnly ? 'dot-only' : '']">
                    {{ props.dotOnly ? "" : props.count }}
                </div>
            </slot>
        </template>
    </a-popup>
</template>

<style lang="scss" scoped>
.pop {
    background-color: red;

    &:not(.dot-only) {
        color: white;
        min-width: 16px;
        height: 16px;
        font-size: 12px;
        padding: 0 2px;
        box-sizing: border-box;
        border-radius: 8px;
    }

    &.dot-only {
        width: 8px;
        height: 8px;
        border-radius: 4px;
    }
}
</style>

<script setup lang="ts">
import { computed } from 'vue'
import APopup from './APopup.vue'

interface PropsType {
    count?: number
    dotOnly?: boolean
    hiddenFunc?: (val: number) => boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    count: 0,
    dotOnly: false,
    hiddenFunc: (a: number) => a <= 0,
})

const popShown = computed(() => {
    return !props.hiddenFunc(props.count)
})
const badgeWidth = computed(() => {
    return props.dotOnly ? 8 : 16
})
const popModifiers = computed(() => {
    return [
        {
            name: 'offset',
            options: {
                offset: [-badgeWidth.value / 2, -badgeWidth.value / 2],
            }
        },
        {
            name: 'preventOverflow',
            options: {
                mainAxis: false,
                altAxis: false,
            }
        }
    ]
})
</script>